<template>
  <div class="home">
    <h2>01_pinia的基本使用</h2>
    <h2>count: {{ counterStore.count }}</h2>
    <h2>失去响应式count: {{ count }}</h2>
    <h2>使用vue中的refs响应式refsCount: {{ refCount }}</h2>
    <h2>使用pinia中的storeToStore响应式storeToRefsCount: {{ storeRefCount }}</h2>
    <button @click="countIncreament">+1</button>
  </div>
</template>

<script setup>
  import useCounter from '@/stores/counter'
  import { toRefs } from 'vue'
  import { storeToRefs } from 'pinia' 
  // import {useCounter} from '@/stores/counter'

  const counterStore = useCounter()
  const { count } = counterStore // 可以解构,会失去响应式
  const { count: refCount } = toRefs(counterStore) // 使用refs解构,可以保持响应式
  const { count: storeRefCount } = storeToRefs(counterStore) // 使用refs解构,可以保持响应式
  function countIncreament() {
    counterStore.count++
  }

</script>

<style scoped>
</style>